import { GithubOutlined } from '@ant-design/icons';
import { Button, Divider } from 'antd';
import { observer } from 'mobx-react-lite';
import { useState } from 'react';

import packageJson from '../../../package.json';
import styles from './index.less';

const Index = () => {
  const [dir, setDir] = useState(localStorage.getItem('videoCacheDir')?.split('/').at(-1));
  const isMac = navigator.userAgent.includes('Mac');
  return (
    <div className={styles.content}>
      {/* <div>
        <div className={styles.formItem}>
          <span>启用小窗录制：</span>{' '}
          <Switch
            checked={store.minWindowRecorder}
            onChange={(checked) => {
              localStorage.setItem('minWindowRecorder', checked.toString());
              store.setStore({ minWindowRecorder: checked });
            }}
          />
        </div>
      </div> */}
      <div>
        <div className={styles.formItem}>
          <span>设置缓存路径：</span>
          <div className={styles.cacheDirName}>{dir}</div>
          <Button
            size="middle"
            onClick={async () => {
              const data = await window.api.openDirectory({
                properties: ['openDirectory'],
                defaultPath: localStorage.getItem('videoCacheDir') || ''
              });
              const dir = data?.filePaths?.[0];
              if (dir) {
                localStorage.setItem('videoCacheDir', dir);
                setDir(dir.split('/').at(-1));
              }
            }}
          >
            浏览
          </Button>
        </div>
      </div>
      <div className={styles.shotCutWrap}>
        <div className={styles.label}>快捷键</div>
        <div className={styles.shotCutList}>
          <div className={styles.shotCutItem}>
            <span>暂停/继续</span>
            <span>{isMac ? 'Command+Shift+Space' : 'Ctrl+Shift+Space'}</span>
          </div>
          <div className={styles.shotCutItem}>
            <span>停止</span>
            <span>{isMac ? 'Command+Shift+S' : 'Ctrl+Shift+S'}</span>
          </div>
        </div>
      </div>
      <Divider />
      <div className={styles.aboutWrap}>
        <div className={styles.label}>关于</div>
        <div>
          <span>当前版本:</span>
          <span className={styles.version}>{process.env.VERSION}</span>
        </div>
        <div className={styles.github}>
          <GithubOutlined />
          <span>{packageJson.repository}</span>
        </div>
      </div>
    </div>
  );
};
export default observer(Index);
